require('../styles/bootstrap.css');
require('../styles/player.less');

import React from 'react';
import $ from 'jquery';
import Progress from './Progress.js';
import VolumeBar from './VolumeBar.js';
import 'jplayer/dist/jplayer/jquery.jplayer.min.js';
import {
	Link
} from 'react-router';
import Pubsub from 'pubsub-js';


var duration = null;
var deg=0;
var rotate=null;

class Player extends React.Component {
		constructor(props) {
			super(props);
			this.handlePlay = this.handlePlay.bind(this);
			this.noVolume = this.noVolume.bind(this);
			this.playNext = this.playNext.bind(this);
			this.playPrev = this.playPrev.bind(this);
			this.playMode = this.playMode.bind(this);
			this.progressChangeHandler = this.progressChangeHandler.bind(this);
			this.width = $('body').width();
			this.state = {
				progress: 0,
				isPlay: true,
				volume: 0,
				isNoVolume: false,
				currentMin: 0,
				currentSec: 0
			};
		}
		handlePlay() {
			this.setState({
				isPlay: !this.state.isPlay
			});
			if (!this.state.isPlay)
				$('#player').jPlayer('play');
			else
				$('#player').jPlayer('pause');
		}
		resize() {
			var left = ($('body').width() - $('.center').width()) / 2;
			var top = ($('body').height() - $('.center').height()) / 2;
			if ($(window).width() < 500)
				top += $('.navbar').height();
			$('.center').css('left', left + 'px');
			$('.center').css('top', top + 'px');
		}
		componentDidMount() {
			$('#player').bind($.jPlayer.event.timeupdate, (e) => {
				duration = e.jPlayer.status.duration;
				this.setState({
					volume: e.jPlayer.options.volume,
					progress: e.jPlayer.status.currentPercentAbsolute,
					currentMin: Math.floor(e.jPlayer.status.currentTime / 60),
					currentSec: Math.floor(e.jPlayer.status.currentTime % 60)
				});
				if (this.state.currentSec < 10)
					this.setState({
						currentSec: '0' + this.state.currentSec
					});
			});
			$('#player').bind($.jPlayer.event.play, (e) => {
				this.setState({
					volume: e.jPlayer.options.volume
				});
				$('#player').jPlayer('volume', 0.5);
			});
			$('#player').bind($.jPlayer.event.volumechange, (e) => {
				this.setState({
					volume: e.jPlayer.options.volume
				});
			});
			$('#player').bind($.jPlayer.event.playing,()=>{
				rotate=setInterval(()=>{
					deg++;
					$('.music-img').css('transform','rotate('+deg+'deg)');
				},200);
			});
			$('#player').bind($.jPlayer.event.pause,()=>{
				window.clearInterval(rotate);
			});
			this.resize();
			$(window).resize(() => {
				this.resize();
			});
		}
		playMode() {
			Pubsub.publish('PLAY_MODE');
		}
		playNext() {
			Pubsub.publish('PLAY_NEXT');
		}
		playPrev() {
			Pubsub.publish('PLAY_PREV');
		}
		componentWillUnMount() {
			$('#player').unbind($.jPlayer.event.timeupdate);
			$('#player').unbind($.jPlayer.event.play);
			$('#player').unbind($.jPlayer.event.volumechange);
			$('#player').unbind($.jPlayer.event.playing);
		}
		volumeChangeHandler(volume) {
			$('#player').jPlayer('volume', volume);
		}
		progressChangeHandler(progress) {
			$('#player').jPlayer('play', duration * progress);
			this.setState({
				isPlay : true
			});
		}
		noVolume() {
			this.setState({
				isNoVolume: !this.state.isNoVolume
			});
		}
		render() {
				var playModeLoopClassName = this.props.playMode === 'loop' ? 'iconfont show' : 'iconfont';
				var playModeRepeatClassName = this.props.playMode === 'repeat' ? 'iconfont show' : 'iconfont';
				var playModeRandomClassName = this.props.playMode === 'random' ? 'iconfont show' : 'iconfont';
				var minutes = Math.floor(duration / 60),
					seconds = Math.floor(duration % 60);
				if (seconds < 10)
					seconds = '0' + seconds;
				if (this.state.isNoVolume)
					$('#player').jPlayer('mute', true);
				else {
					$('#player').jPlayer('mute', false);
				}
				var volumeClassName = this.state.isNoVolume ? 'glyphicon glyphicon-volume-off' : 'glyphicon glyphicon-volume-up music-volume';
				var minPageClassName = this.width < 800 ? 'row minPage' : 'row';
				var isPlayClassName = 'glyphicon glyphicon-pause';
				if (this.state.isPlay)
					isPlayClassName = 'glyphicon glyphicon-pause';
				else
					isPlayClassName = 'glyphicon glyphicon-play';
		return (
	    <div className="container center">
		  <div className={minPageClassName}>
		    <div className="col-md-7 divInner">
		      <div className="row">
		         <Link to="/list" className="link">我的私人音乐坊 &gt;</Link>
		      </div>
		      <div className="row"><p className="music-title">{this.props.currentMusicItem.title}</p></div>
		      <div className="row"><p className="music-author">{this.props.currentMusicItem.artist}</p></div>
		      <div className="row" style={{marginBottom:'15px'}}>
		        <span className="music-time">{this.state.currentMin}:{this.state.currentSec}/{minutes}:{seconds}</span>
		        <span className={volumeClassName} onClick={this.noVolume} style={{fontSize:'20px'}}>&nbsp;</span>
		        <VolumeBar volume={this.state.volume} onVolumeChange={this.volumeChangeHandler} barColor='#555' />
		      </div>
		      <div className="row minPage" style={{marginBottom:'5px'}}>
		        <Progress progress = {this.state.progress} onProgressChange={this.progressChangeHandler} barColor='green' />
		      </div>
		      <div className="row" style={{marginTop:'10px'}}>
		        <div className="col-md-9">
		          <span onClick={this.playPrev} className="glyphicon glyphicon-chevron-left">&nbsp;</span>
		          <span className={isPlayClassName} onClick={this.handlePlay} >&nbsp;</span>
		          <span onClick={this.playNext} className="glyphicon glyphicon-chevron-right">&nbsp;</span>
		        </div>
		        <div className="col-md-2" style={{textAlign:'right'}}>
		          <span onClick={this.playMode} className={playModeLoopClassName}>&#xe63e;</span>
		          <span onClick={this.playMode} className={playModeRepeatClassName}>&#xe602;</span>
		          <span onClick={this.playMode} className={playModeRandomClassName}>&#xe699;</span>
		        </div>
		      </div>
		    </div>
		    <div className="col-md-5 divInner" style={{textAlign:'center'}}>
		      <img className="music-img" src={this.props.currentMusicItem.cover} alt="" />
		    </div>
		  </div>
		</div>
);
	}
}

Player.defaultProps = {
};

export default Player;